<!--
* @fileName c-table.vue
* @author 
* @date 2022/12/29 14:00:54
* @version V1.0.0
* @description 
!-->
<template>
  <div class="container">
    <table>
      <thead>
        <tr>
          <th v-for="(i,index) in columns" :key="index" :style="{ background: i.backgroundColor }">{{i.name}}</th>
        </tr>
      </thead>
      <tbody>
        <!-- 列表数据 -->
        <tr v-for="(row, index) in dataSource" :key="index" class="list-tr">
          <td v-for="(column, i) in columns" :key="i" @click="RowClick(row,column)">{{ row[column.key] }}</td>
        </tr>
      </tbody>
    </table>

  </div>
</template>

<script>
export default {
  name: "",
  props: {
    bgcolor: Object,
    dataSource: Array,
    columns: Array,
    tableScrollHeight: {
      type: Number,
      default: 200,
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    RowClick(row, column) {
      this.$emit("row-click", row, column);
    },
  },
};
</script>
<style lang='scss' scoped>
.container {
  overflow: auto;
  font-size: 13px;
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 auto;
  th {
    // word-break: break-all;
    // word-wrap: break-word;
    height: 40px;
    min-width: 100px;
    vertical-align: middle;
    text-align: center;
    border-left: 1px solid #999;
    background: #d9d9d9;
    box-sizing: border-box;
  }
  td {
    // word-break: break-all;
    // word-wrap: break-word;
    min-width: 100px;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    border-left: 1px solid #999;
    box-sizing: border-box;
  }
  tr {
    border-top: 1px solid #999;
    box-sizing: border-box;
  }
  tr:nth-child(odd) td {
    background-color: #ffffff;
  }
  tr:nth-child(even) td {
    background-color: #f3f3f3;
  }
  // 设置头部的所有单元格为粘性定位 以及其它属性
  thead tr th {
    position: sticky;
    left: 0;
    top: 0;
  }
  // 设置头部的第一个单元格
  thead tr th:first-child {
    z-index: 2;
    // background-color: lightblue;
  }
  // 设置内容区的第一列单元格
  tbody {
    tr {
      text-align: center;
    }
    tr td:first-child {
      position: sticky;
      left: 0;
      z-index: 0;
      height: 27px;
      // background-color: #ffffff;
    }
    // 设置下边框线
    td {
      // border-bottom: 1px solid #f4f4f4;
    }
  }
}
</style>


